<template>
  <div class="map-page">
    <!-- 地图容器 -->
    <TdtCesiumMap
      ref="mapRef"
      :token="mapConfig.tdtToken"
      :lon="mapConfig.center.lon"
      :lat="mapConfig.center.lat"
      :height="mapConfig.center.height"
    />

    <!-- 右侧信息面板 -->
    <div class="side-panel">
      <el-card shadow="never" class="panel-card">
        <div class="panel-title">企业信息</div>
        <el-form label-position="top" :model="enterprise" class="panel-form">
          <el-form-item label="企业名称">
            <el-input v-model="enterprise.name" placeholder="东营市海科瑞林化工有限公司" />
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="enterprise.shortName" placeholder="绿城科技" />
          </el-form-item>
          <el-form-item label="企业统一社会信用代码">
            <el-input v-model="enterprise.uscc" placeholder="9111XXXXXXXXXXXXXX" />
          </el-form-item>
          <el-form-item label="企业地址">
            <el-input v-model="enterprise.addr" placeholder="北京市朝阳区朝阳路12号" />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="enterprise.contact" placeholder="张三" />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="enterprise.mobile" placeholder="133 4141 5251" />
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 坐标查询 -->
      <el-card shadow="never" class="coord-card">
        <div class="coord-title">
          <span>位置标绘</span>
          <el-button type="primary" size="small" @click="handleFly">查询</el-button>
        </div>
        <el-form label-position="top" class="coord-form">
          <el-form-item label="经度">
            <el-input v-model="query.lon" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="纬度">
            <el-input v-model="query.lat" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { MAP_CONFIG } from '@/config/map';
import TdtCesiumMap from '@/components/cesium/TdtCesiumMap.vue';

const mapConfig = MAP_CONFIG;

const enterprise = reactive({
  name: '东营市海科瑞林化工有限公司',
  shortName: '绿城科技',
  uscc: '9111XXXXXXXXXXXXXX',
  addr: '北京市朝阳区朝阳路12号',
  contact: '张三',
  mobile: '133 4141 5251'
});

const query = reactive({
  lon: String(mapConfig.center.lon),
  lat: String(mapConfig.center.lat)
});

const mapRef = ref<InstanceType<typeof TdtCesiumMap> | null>(null);

const handleFly = () => {
  const lon = Number(query.lon);
  const lat = Number(query.lat);
  if (!Number.isFinite(lon) || !Number.isFinite(lat)) {
    ElMessage.warning('请输入有效的经纬度');
    return;
  }
  mapRef.value?.flyTo(lon, lat, mapConfig.center.height || 15000);
  // 飞行后对点位进行标注
  (mapRef.value as any)?.updateLocationMarker?.(lon, lat);
};
</script>

<style scoped>
.map-page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
}

.side-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 380px;
  pointer-events: none; /* 不影响地图操作 */
}

.panel-card,
.coord-card {
  border-radius: 12px;
  pointer-events: auto; /* 允许与卡片交互 */
}

.panel-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.panel-form :deep(.el-form-item) {
  margin-bottom: 12px;
}

.coord-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 8px;
}

.coord-form :deep(.el-form-item) {
  margin-bottom: 10px;
}
</style>
